<template>
	<view class="close-tag">
		<view class="tag-text"> {{txt}} </view>
		<image src="/static/icon/shop/close.png" class="tag-close" @tap="emits('delTag', {fIndex, index})" />
	</view>
</template>

<script setup>
	const props = defineProps(['txt', 'index', 'fIndex'])
	const emits = defineEmits(['delTag'])
</script>

<style lang="scss" scoped>
	.close-tag {
		height: 20px;
		padding: 0 5px;
		overflow: hidden;
		// margin-left: 8px;
		border-radius: 5px;
		align-items: center;
		display: inline-flex;
		justify-content: 	space-between;
		border: 1px solid #f3f3f3;
		&:nth-of-type(1) {
			margin-right: 0;
		}
		.tag-text {
			color: #333;
			font-size: 12px;
			max-width: 50px;
			overflow: hidden;
			line-height: 12px;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.tag-close {
			width: 12px;
			height: 12px;
			margin-left: 8px;
		}
	}
</style>